Vue和React两个JavaScript框架都是当下比较受欢迎的，下面我们来一起探讨下它们的异同和技术选型。
1. 相同点
1.1 都使用了虚拟Dom
Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
在HTML中的标签
在JavaScript中，虚拟Dom可以用对象简单地创造一个针对上面例子的映射当新一项被加进去这个JavaScript对象时，一个函数会计算新旧Virtual DOM之间的差异并反应在真实的DOM上。
计算差异的算法是高性能框架的秘密所在，React和Vue在实现上有点不同。
Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
而对于React而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，但Vue将此视为默认的优化。
1.2 组件化
React与Vue都鼓励组件化应用。这本质上说，是建议你将你的应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。下面我们看一个简单组件的例子
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
<div class="content">
<img :src="item.icon" :alt="item.alt"/>
<div>
<p class="header">{{item.name || ''}}</p>
<p>{{item.des || ''}}</p>
</div>
</div>
</template>
<script>
export default {
name: "test-item",
props: {
"item": {
type: Object,
default: {}
},
}
}
</script>
<style scoped>
.content {
width: 100%;
padding: 8px;
display: flex;
justify-content: flex-start;
text-align: left;
}
.content img {
height: 20px;
width: 20px;
margin: auto 8px auto 0;
}
.content .header {
font-weight: bolder;
}
</style>
1 | // React |
- ######1.3 Chrome 开发工具
React和Vue都有很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用，让你看到Vue或者React中的变化。你也可以看到应用中的状态，并实时看到更新
React的开发工具react-devtools
Vue的开发工具vue-devtools
- ######1.4 构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板
######1.5 配套框架
Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于，两个框架都专注于UI层，其他的功能如路由、状态管理等都交由其他框架进行处理。而不同之处是在于它们如何关联它们各自的配套框架。Vue的核心团队维护着vue-router和vuex，它们都是作为官方推荐的存在。而React的react-router、dva和react-redux则是由社区成员维护。
2. 不同点
Vue与React有很多的相似之处，但他们也有完全不一致的地方。
- ######2.1 JSX和模板
React与Vue最大的不同就是一个使用JSX语法编写(React), 一个使用模板编写(Vue)
Vue鼓励你去使用HTML模板去进行渲染, 因此，通过把原有的模板整合成新的Vue模板，Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。
2
3
4
5
6
7
> v-for="(item, index) in data"
> :item="item"
> :index="index"
> :key="index"
> :clickHandle="testItemClick(item)" />
>
而React推荐JSX书写。同样的效果，用JSX书写的如下：
2
3
4
5
6
7
8
9
10
> const itemProps = {
> item,
> index,
> key: index,
> clickHandle: this.testItemClick.bind(this)
> };
> return <TestItem {...itemProps} />
> })
>
看起来JSX有些比较麻烦, 但是使用起来比较灵活
与React一样，Vue在技术上也支持render函数和JSX，但只是不是默认的而已。我们来看下Vue官方的一个例子
2
3
4
5
6
7
8
9
10
11
12
13
14
15
> new Vue({
> el: '#demo',
> render: function (h) {
> return (
> <AnchoredHeading level={1}>
> <span>Hello</span> world!
> </AnchoredHeading>
> )
> }
> })
>* 2.2 状态管理(React)和对象属性(Vue)
> React通过状态(state)进行管理, 并且state对象在React应用中是不可变的在React中你需要使用setState()方法去更新状态
>
testItemClick (item) { const data = [...this.state.data]; item.count += 1; this.setState({ data }) }
2
>
testItemClick (item) { const data = [...this.state.data]; item.count += 1; this.setState({ data }) }
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
>* 2.3 React Native 和 Weex
> React Native能在手机上创建原生应用，React在这方面处于领先位置。使用JavaScript, CSS和HTML创建原生移动应用, 并且有丰富的官方组件。Vue社区与阿里合作开发Vue版的React Native——Weex也很不错，但仍处于开发状态并且官方组件并不是太丰富。
#### 3. 技术选型
对比完React和Vue的一些特点后, 我们来探讨下在项目中到底该选择那种框架
>* 3.1 编码风格
> 如果你喜欢使用JSX,React更加适合; 如果你喜欢使用模板,Vue更加适合;
>* 3.2 性能测试
> 下面是性能对比这些性能测试显示，Vue 比 React 占用的内存更少，运行速度更快
>* 3.3 大型应用程序
> 用Vue和React实现的简单应用程序来比较两者，可能会让一个开发者从一开始就更倾向于Vue。这是因为基于模板的应用程序乍看上去更易理解，而且能很快地写好并跑起来。但是这些最初的便利会引入技术债并阻碍应用扩展到更大的规模。模板容易出现难以注意到的运行时错误，同时也不易于测试，重构和分解。
相比之下，Javascript模板可以组织成经过良好分解，且使用避免重复代码原则的代码组件，因而具有更强的可重用性和可测试性。Vue也有组件系统和渲染函数，但React的渲染系统可配置性更强，并包含如shallow rendering这样的特性，可结合React的测试工具一起使用，从而大为提高代码的可测试性及可维护性。
>* 3.4 React更加适合原生应用
> React Native是一个用于通过Javascript构建移动端原生应用程序的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。
>
// JS
import React, { Component } from ‘react’;
import { AppRegistry, Text, View } from ‘react-native’;
class HelloWorld extends Component {
render() {
return (
Hello, React Native!
);
}
}
AppRegistry.registerComponent(‘HelloWorld’, () => HelloWorld);
我们只需要一套知识和工具就能开发Web应用和移动端原生应用。阿里的Weex也是一个跨平台UI项目，目前它以Vue为灵感，使用了许多相同的语法。但是目前还不够成熟。
- 3.5 生态圈
就目前来说, React比Vue要受欢迎许多
这两个框架都是开源的，但是React诞生于Facebook，它的开发者和Facebook都承诺会持续维护React。而Vue则是由独立开发者尤雨溪创造，目前也只有他一名全职维护者。虽然也有一些公司资助Vue，但是规模和Facebook没得比。但是在Github上Vue(122K)获得星数超过了React(117K)
最后, 到底是选择React和Vue, 个人感觉要看开发团队的技术栈, 如果喜欢使用jsx建议用React, 如果喜欢使用模板建议使用Vue; 如果做原生APP, 建议使用ReactNative